<template>
  <div>
    <div id="container" ref="container"></div>
  </div>
</template>

<script>
import * as THREE from 'three';
// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 控制器-控制相机运行轨道
var scene;
var camera;
var renderer;
// var controls;
var axeshelper;
export default {
  name: 'WorkspaceJsonThreejsPracticeOne',

  data() {
    return {
      width: 1053,
      height: 473
    };
  },
  created() {
    this.initTHREE();
    this.watchResize();
    this.helper();
    this.animation();
  },
  mounted() {
  },

  methods: {
    initTHREE() {

      scene = new THREE.Scene(); // 创建场景

      camera = new THREE.PerspectiveCamera(40, this.width / this.height, 1, 2000); // 创建相机
      camera.position.set(5, 5, 5); // 设置相机位置
      camera.lookAt(0, 0, 0); // 设置相机望向的位置

      const geometry = new THREE.BoxGeometry(1, 1, 1);      // 创建几何体 
      const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }); //创建材质
      const mesh = new THREE.Mesh(geometry, material); // 将材质额几何体结合为物体
      mesh.position.set(0, 0, 0) //向相机中添加物体
      scene.add(mesh);      // 将物体添加进场景

      renderer = new THREE.WebGLRenderer(); // 创建渲染器
      renderer.setSize(this.width, this.height) //设置渲染器尺寸
      this.$nextTick(() => {
        document.getElementById('container').appendChild(renderer.domElement); // 绘制渲染器Dom节点
      })
      renderer.render(scene, camera); //渲染场景和相机
    },
    helper() {
      axeshelper = new THREE.AxesHelper(500);
      scene.add(axeshelper);
    },
    watchResize() {
      window.addEventListener("resize", () => {
      })
    },
    animation() {
      renderer.render(scene, camera);
      // controls = new OrbitControls(camera, renderer.domElement);
      // controls.addEventListener('change', function () {
      //   renderer.render(scene, camera); //执行渲染操作
      // });//监听鼠标、键盘事件
      requestAnimationFrame(this.animation)
    }
  },
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>